<template>
    <div class="screen-bottom-left">
        <div class="screen-bottom-header flex-l">
            <div class="header-left flex-c">
                <i class="iconfont icon-align-left" />
            </div>
            <div class="header-right flex-l">
                <span class="header-title">城市销量排行</span>
                <dv-decoration-1 class="dv-dec-1" />
            </div>
        </div>
        <div class="screen-bottom-chart">
            <Chart :chart-data="chartData"></Chart>
        </div>
    </div>
</template>

<script setup lang="ts">
import Chart from './chart/ChartBottomLeft.vue'
import { defineComponent, reactive, onMounted } from 'vue'
const chartData = reactive({
    category: [
        "深圳",
        "广州",
        "佛山",
        "东莞",
        "惠州",
        "中山",
        "珠海",
        "江门",
        "阳江",
        "茂名",
        "湛江",
        "云浮",
        "肇庆",
        "清远",
        "梅州",
        "河源",
        "韶关",
        "潮州",
        "揭阳",
        "汕头",
        "汕尾",
        "珠海"
    ],
    lineData: [
        6278,
        5632,
        5762,
        4715,
        4444,
        5415,
        5061,
        4566,
        4521,
        4560,
        3092,
        2728,
        2045,
        2348,
        3808,
        3097,
        3867,
        4715,
        4444,
        3415,
        3097,
        3867,
    ],
    barData: [
        3500,
        3000,
        2500,
        2200,
        2450,
        2250,
        2300,
        1400,
        1500,
        1500,
        600,
        700,
        800,
        900,
        1500,
        1000,
        1500,
        800,
        1900,
        1500,
        1000,
        1500,
        1200,
        1450,
        1250,
        1700
    ],
    rateData: [] as Array<string>
})

// methods
const setData = () => {
    for (let i = 0; i < chartData.barData.length - 1; i++) {
        const rate = chartData.barData[i] / chartData.lineData[i];
        chartData.rateData.push(rate.toFixed(2));
    }
}

// 生命周期
onMounted(() => {
    setData()
})
</script>

<style lang="scss" scoped>

.screen-bottom-left {
    height: $box-height6 - 10px;
    // width: $box-width3;
    background-color: $theme-sub-color;
    margin: 15px 5px;
    border-radius: 20px;

    .screen-bottom-header {
        height: $chart-header-height;

        .header-left {
            width: 40px;
        }

        .header-right {
            width: calc(100% - 40px);

            .header-title {
                color: #fff;
                font-size: $sm-font-size;
            }

            .dv-dec-1 {
                width: 50px;
                height: 20px;
                margin-left: 10px;
            }
        }
    }
}
</style>
